<script lang="ts" setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";

import type { UploadProps } from "element-plus";

const imageUrl = ref("");

const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!);
};

const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
  if (rawFile.type !== "image/jpeg") {
    ElMessage.error("Avatar picture must be JPG format!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("Avatar picture size can not exceed 2MB!");
    return false;
  }
  return true;
};
</script>

<template>
  <div>
    <div class="head">
      <div class="h1" ></div>
      <button class="frontcover">
        <span class="cap">​<svg width="1.2em" height="1.2em" viewBox="0 0 24 24" data-new-api="CameraFill24" data-old-api="Camera" class="Camera" fill="currentColor"><path d="M7.394 4.814A2.41 2.41 0 019.65 3.25h4.7a2.41 2.41 0 012.256 1.564l.539 1.436h2.195a2.41 2.41 0 012.41 2.41v9.68a2.41 2.41 0 01-2.41 2.41H4.66a2.41 2.41 0 01-2.41-2.41V8.66a2.41 2.41 0 012.41-2.41h2.195l.539-1.436zM13.5 13a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm1.5 0a3 3 0 11-6 0 3 3 0 016 0z" fill-rule="evenodd" clip-rule="evenodd"></path></svg></span>上传封面图片
      </button>
      <div class="h2"></div>
      <button class="info">
        <router-link to="/cyd/info">编辑个人资料</router-link>
      </button>
      <!-- 头像框 -->
      <el-upload
      class="avatar-uploader"
      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
    >
    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
      <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
    </el-upload>
    </div>
  </div>
</template>

<style >
* {
  margin: 0;
  padding: 0;
  background-color: rgb(246, 246, 246);
}
a {
  text-decoration: none;
  color: #056de8;
  background-color: rgb(255, 255, 255);
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 2px solid var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
  top:-215px;
  left: 20px;
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 160px;
  height: 160px;
  text-align: center;
}
</style>
    
<style scoped="scoped">
.head {
  width: 1000px;
  height: 300px;
  margin: auto;
}
.h1 {
  width: 1000px;
  height: 132px;
  background-color: rgb(153, 153, 153);
}
.h2 {
  width: 1000px;
  height: 140px;
  background-color: rgb(255, 255, 255);
}
.info {
  position: relative;
  top: -80px;
  left: 846px;
  padding: 0 16px;
  font-size: 14px;
  line-height: 32px;
  text-align: center;
  cursor: pointer;
  background: none;
  border: 1px solid;
  border-radius: 3px;
  border-color: #056de8;
}
.frontcover{
   width: 133px;
   height: 32px;
    font-size: 14px;
    line-height: 32px;
    cursor: pointer;
    background: none;
    border: 1px solid;
    border-radius: 3px;
    position: absolute;
    top: 21px;
    left: 1090px;
    padding-left: 30px;
    box-sizing: border-box;
}
.Camera{
  background-color: rgb(153, 153, 153);
  position: absolute;
  top:7px;
  left: 15px;
}
.cap{
  background-color: rgb(153, 153, 153);
}
</style>